<template>
  <div id="wp-school-table">
    <div class="condition" style="margin-top:0.2rem;">
      <div class="row_one">
        <el-select
          v-model="tabledisplayObj.cooperationMode"
          clearable
          placeholder="选择合作模式"
          style="width: 1.8rem;"
        >
          <el-option
            v-for="item in cooperationModeList"
            :key="item.name"
            :label="item.name"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-cascader v-model="cityValue" :props="defaultProps" style="width: 2.5rem;" placeholder="省市区"
          clearable :options="citys" separator="" @change="selectCitys"></el-cascader>
        <el-input
          style="width: 3.5rem;"
          placeholder="搜索 校区名"
          clearable
          v-model="tabledisplayObj.key"
          class="input_search"
        ></el-input>
        <div @click="selectCampus()" class="search_btn" style="margin-left:0.1rem;">搜索</div>
        <div
          @click="exportCampus()"
          :style="{cursor : isExport?'not-allowed' : 'pointer'}"
          class="btn_user_defined"
          style="margin-left:0.1rem;"
        >校区导出</div>
        <!-- <el-button @click="selectCampus()" slot="append" class="btn_user_defined">搜索</el-button> -->
        <el-radio-group
          class="timeselect"
          size="mini"
          v-model="timeselect"
          style="letter-spacing: 0rem; "
          @change="workTableChangeTime"
        >
          <el-radio-button label="今日"></el-radio-button>
          <el-radio-button label="近7天"></el-radio-button>
          <el-radio-button label="本月"></el-radio-button>
          <el-radio-button label="一年"></el-radio-button>
          <el-radio-button label="自定义" ref="selfBtn"></el-radio-button>
        </el-radio-group>
        <el-date-picker
          v-model="selfTime"
          type="datetimerange"
          @change="updateSelfTime"
          ref="selfTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        ></el-date-picker>
      </div>
    </div>
    <div style="margin-top:0.16rem;">
      <table class="table" cellspacing="0">
        <thead class="thead">
          <tr>
            <td style="width: 1rem;">序号</td>
            <td style="width: 4rem;">校区名称</td>
            <td style="width: 2rem;">合作类型</td>
            <td style="width: 2rem;">合作周期</td>
            <td style="width: 2rem;">添加日期</td>
            <td style="width: 2rem;">预收款</td>
            <td style="width: 2rem;">总退费款</td>
            <td style="width: 2rem;">消课收入</td>
            <td style="width: 1rem;">开班数</td>
            <td style="width: 1rem;">总学员</td>
            <td style="width: 1.5rem;">新增线索</td>
            <td style="width: 1.5rem;">新增试听</td>
            <td style="width: 1.5rem;">新增报名</td>
            <td style="width: 1.5rem;">教师账号总数</td>
            <td style="width: 1.5rem;">新增教师数</td>
            <td style="width: 1.5rem;">操作</td>
          </tr>
        </thead>
        <tbody class="tbody">
          <tr v-for="(item,index) in campusList" :key="index">
            <td>{{item._index}}</td>
            <td>{{item.name}}</td>
            <td>{{item.cooperateModeName}}</td>
            <td v-if="item.isNoTime">无限期</td>
            <td v-else>{{item.serveStartTimeShow}}至{{item.serveEndTimeShow}}</td>
            <td>{{item.createTime}}</td>
            <td>{{item.totalAccount}}</td>
            <td>{{item.totalRefundAccount}}</td>
            <td>{{item.totalConsumeMoney}}</td>
            <td>{{item.totalClassCount}}</td>
            <td>{{item.totalStudentCount}}</td>
            <td>{{item.totalClueCount}}</td>
            <td>{{item.totalTrialClassStudentCount}}</td>
            <td>{{item.totalSignUpCount}}</td>
            <td>{{item.totalTeacherCount}}</td>
            <td>{{item.totalNewTeacherCount}}</td>
            <td>
              <!-- <span class="operate_btn" @click="handleLook(index,item)">详情</span> -->
              <!-- <span class="operate_btn" @click="entryCampus(item)">进入</span> -->
              <el-button type="text" style="font-size:0.16rem;" @click="entryCampus(item)">进入</el-button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <el-pagination
      class="page"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page="tabledisplayObj.currPage"
      @size-change="pageSizeChange"
      @current-change="tabledisplayChangePage"
      :total="tabledisplayObj.total"
    ></el-pagination>
  </div>
</template>

<script>
import citys from "@/../static/citys.json"
import menuTool from "@/js/common/menu";
import relogin from "@/js/common/org_relogin";
let vm;
let user;
export default {
  components:{},
  data() {
    return {
      tabledisplayObj: {
        currPage: 1,
        pageSize: 10,
        total: 0,
        cooperationMode: "",
        key: "",
        startTime: "",
        endTime: "",
        province:'',
        city:'',
        area:''
      },
      isExport: false,
      selfTime: [],
      timeselect: "一年",
      pre_timeselect:'',
      cooperationModeList: [],
      campusList: [],
      campusStatisticsData: {},

      //城市数据
			citys : [],
			cityValue : [],
			defaultProps: {
        label: "label",
        value: "value",
        children: "children",
        checkStrictly: true
      },
    };
  },
  methods: {
    exportCampus() {
      //正在导出中
      if (vm.isExport) {
        return;
      } else {
        vm.isExport = true;
      }

      var noti = tool.notify({
        title: "校区导出处理中...",
        message: "请稍候，无须重复操作",
        type: "info",
        duration: 0
      });
      let param=tool.clone(vm.tabledisplayObj);
      param.currPage=1;
      api
        .excelCampus(param)
        .then(function(response) {
          console.log(response.data);
          //创建二进制文件和a标签
          var blob = new Blob([response.data], {
            type: "application/vnd.ms-excel"
          });
          var a = document.createElement("a");
          //赋值文件名和文件
          a.download = decodeURI(
            response.headers["content-disposition"].split(";")[1].split("=")[1]
          );
          a.href = URL.createObjectURL(blob);
          document.body.appendChild(a);
          //触发点击事件,销毁元素
          var evt = document.createEvent("MouseEvents");
          evt.initEvent("click", false, false);
          a.dispatchEvent(evt);
          document.body.removeChild(a);

          //关闭通知框
          noti.close();
          vm.isExport = false;
          tool.notify({
            title: "校区导出成功",
            message: "请保存至本地",
            type: "success",
            duration: 4000
          });
        })
        .catch(function() {
          console.log("cccccccccccc");
          //关闭通知框
          noti.close();
          vm.isExport = false;
        });
    },
    /**自定义时间确认选择后 */
    updateSelfTime(d) {
      if (!d) return;
      this.timeselect='自定义';
      vm.tabledisplayObj.startTime = d[0];
      vm.tabledisplayObj.endTime = d[1];
      this.getOrgCampusList(1);
    },
    /**切换时间 */
    workTableChangeTime(d) {
      //自定义时间选取
      // console.log(d);
      if (d === "自定义") {
        this.$refs.selfTime.focus();
        this.timeselect=this.pre_timeselect;
        return;
      }
      this.selfTime=[];
      let timeobj;
      if (d == "今日") {
        timeobj = tool.getTimeObjByType(1);
      } else if (d == "近7天") {
        timeobj = tool.getTimeObjByType(21);
        // console.log(timeobj)
      } else if (d == "本月") {
        timeobj = tool.getTimeObjByType(3);
      } else if (d == "一年") {
        timeobj = tool.getTimeObjByType(4);
      }
      this.pre_timeselect=d;
      vm.tabledisplayObj.startTime = timeobj.startTime;
      vm.tabledisplayObj.endTime = timeobj.endTime;
      this.getOrgCampusList(1);
    },
    /**
     * 初始化数据
     */
    initData() {
      let timeobj = tool.getTimeObjByType(4);
      vm.tabledisplayObj.startTime = timeobj.startTime;
      vm.tabledisplayObj.endTime = timeobj.endTime;
      this.getOrgCampusList(1);
    },
    /**
     * 机构获取校区统计列表（分页）
     */
    getOrgCampusList(pgIndex) {
      this.tabledisplayObj.currPage = pgIndex||this.tabledisplayObj.currPage;
      let campustemp = []; //临时存放列表
      api.getOrgCampusList(vm.tabledisplayObj).then(function(data) {
        //枚举科目列表
        if (data.resultCode == 2000) {
          campustemp = data.list;
          for (let i = 0; i < campustemp.length; i++) {
            campustemp[i].serveStartTimeShow = campustemp[i].serveStartTime
              ? campustemp[i].serveStartTime.split(" ")[0]
              : "";
            campustemp[i].isNoTime = campustemp[i].cooperationMode == 2;
            campustemp[i].serveEndTimeShow = campustemp[i].serveEndTime
              ? campustemp[i].serveEndTime.split(" ")[0]
              : "";
            for (let y = 0; y < vm.cooperationModeList.length; y++) {
              if (
                vm.cooperationModeList[y].value == campustemp[i].cooperationMode
              ) {
                campustemp[i].cooperateModeName =
                  vm.cooperationModeList[y].name;
              }
            }
            campustemp[i]._index=(data.currPage-1)*data.pageSize+i+1;
          }
          vm.campusList = campustemp;
          vm.tabledisplayObj.total = data.totalCount;
        } else {
          tool.message({
            showClose: true,
            message: data.message,
            type: "error"
          });
        }
      });
    },
    pageSizeChange: function(val) {
      this.tabledisplayObj.pageSize = val;
      this.getOrgCampusList(1);
    },
    /**表格显示形式翻页 */
    tabledisplayChangePage(val) {
      this.tabledisplayObj.currPage = val;
      this.getOrgCampusList();
    },
    selectCampus() {
      this.getOrgCampusList(1);
    },
    handleLook(index, item) {
      var path = vm.$store.state.permit["48"].path;
      if (!path) {
        tool.message({
          showClose: true,
          message: "当前用户缺少权限",
          type: "warning"
        });
        return;
      }
      //传递参数
      this.$router.push({
        path: path,
        query: { campusId: tool.encode(item.campusId) }
      });
    },
    init() {
      this.initData();
    },
    /**选择区域 */
    selectCitys(val){
      // debugger
      this.tabledisplayObj.province='';
      this.tabledisplayObj.city='';
      this.tabledisplayObj.area='';
      if(val){
        if(val.length==1){
          this.tabledisplayObj.province=val[0];
          this.tabledisplayObj.city='';
          this.tabledisplayObj.area='';
        }
        else if(val.length==2){
          this.tabledisplayObj.province=val[0];
          this.tabledisplayObj.city=val[1];
          this.tabledisplayObj.area='';
        }
        else if(val.length==3){
          this.tabledisplayObj.province=val[0];
          this.tabledisplayObj.city=val[1];
          this.tabledisplayObj.area=val[2];
        }
      }
    },
    /**进入校区-工作台为 机构工作台下的校区详情页，其他变为对应校区页面 */
    entryCampus(data){
      //切换到校区权限、菜单列表
      relogin({orgEntrySchool:true,campusId:data.campusId},this,menuTool);
    },
  },
  mounted() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    let dicdata = tool.getItem(lsKey.dict, true);
    vm.cooperationModeList = dicdata["cooperation_mode"];
    vm.citys=citys;
    this.initData();
  },
  beforeDestroy(){
  },
  computed: {}
};
</script>

<style lang="scss" scoped>
#wp-school-table {
  width: 100%;
  height: auto;
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }

  .btn_user_defined {
    display: inline-block;
    width: 1.16rem;
    padding-left: 0.22rem;
    height: 0.36rem;
    line-height: 0.36rem;
    border-radius: 0.08rem;
    color: white;
    font-size: 0.16rem;
    cursor: pointer;
    letter-spacing: 0.03rem;
    background-color: #3885f8;
    position: relative;
    top: 0.01rem;
  }
  .btn_user_defined:hover {
    background-color: rgba(56, 133, 248, 0.8);
  }
  .row_one {
    position: relative;
    .el-date-editor {
      float: right;
      margin-right: -2.97rem;
      // position: absolute;
      // right: 0.2rem;
      // top: 0.05rem;
      width: 0.69rem;
      height: 0.27rem;
      opacity: 0;
      pointer-events: none;
    }
  }
  .el-row {
    margin-bottom: 0.2rem;
    margin-top: 0.2rem;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  
  .grid-content {
    border-radius: 0.1rem;
    min-height: 1.5rem;
  }
  .timeselect {
    float: right;
    // position: absolute;
    // right: 0.26rem;
    // top: 0.2rem;
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      color: #3885f8;
      font-weight: bold;
      background: #ffffff;
      border: 0.01rem solid #dcdfe6;
      -webkit-box-shadow: 0rem 0 0 0 #ffffff;
      box-shadow: 0rem 0 0 0 #ffffff;
    }
  }
  
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped>

</style>
